<template>
  <div class="page">
    <v-pageTitle title="工单列表"></v-pageTitle>
    <v-pageSearch>
      <el-form :inline="true">
         <el-form-item>
           <el-button  type="primary">新建工单</el-button>
         </el-form-item>
      </el-form>
    </v-pageSearch>
    <!--工具条-->
    <v-pageToolbar>
        <el-button  type="danger" @click="batchClick" :disabled="this.sels.length===0">批量操作</el-button>
    </v-pageToolbar>
    <v-pageTable pagination :sizeChange="sizeChange" :pageChange="pageChange" :paginationTotal="paginationTotal" paginationAlign="center">
        <el-table v-loading="tableData.loading" :data="tableData.body" border style="width: 100%" @selection-change="selsChange" :default-sort="{prop: 'date', order: 'descending'}">
            <el-table-column fixed type="selection" width="50">
            </el-table-column>
            <el-table-column type="index" label="序号" width="80" align="center">
            </el-table-column>
            <el-table-column v-for="(item,index) in tableData.head" :prop="item.key" :label="item.name" sortable :key="index"  min-width="150">
            </el-table-column>
            <el-table-column fixed="right" label="操作" min-width="200">
                <template slot-scope="scope">
                  <el-button  @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                  <el-button  type="text" size="small">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>
    </v-pageTable>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        tableData: {
            loading: true,
            head: [],
            body: []
        },
        paginationTotal: 100,
        sels:[]
      }
    },
    methods: {
      getTableData(data) {
          // ajax 查询表格数据
          this.tableData.head = [
              {
                  key: 'date',
                  name: '日期'
              },
              {
                  key: 'content',
                  name: '内容'
              },
              {
                  key: 'regestDate',
                  name: '登记时间'
              },
              {
                  key: 'auditor',
                  name: '审核人'
              },
              {
                  key: 'statue',
                  name: '状态'
              },
              {
                  key: 'reason',
                  name: '未通过原因'
              }
          ]
          this.tableData.body = [
            {
              date: '2016-05-04',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              auditor: 'Jesen',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              date: '2016-05-01',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              auditor: 'Jesen',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              date: '2016-05-03',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              auditor: 'Jesen',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              date: '2016-05-02',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              auditor: 'Jesen',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              date: '2016-05-04',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              auditor: 'Jesen',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              date: '2016-05-01',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              auditor: 'Jesen',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              date: '2016-05-03',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              auditor: 'Jesen',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              date: '2016-05-02',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              auditor: 'Jesen',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              date: '2016-05-04',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              auditor: 'Jesen',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }, {
              date: '2016-05-01',
              content: 'XXXXXXXXXX',
              regestDate: '2017-11-07',
              auditor: 'Jesen',
              statue: 1,
              reason: '与事实不符',
              province: '上海',
              city: '普陀区',
              address: '上海市普陀区金沙江路 1518 弄',
              zip: 200333
            }
          ]
          // 模拟加载
          setTimeout(() => {
              this.tableData.loading = false
          }, 1000)
      },
      sizeChange(val){
        console.log(val)
        this.getTableData()
      },
      pageChange(val){
        console.log(val)
        this.getTableData()
      },
      selsChange: function (sels) {
				this.sels = sels;
			},
      handleClick(row) {
        console.log(row);
      },
      batchClick(){
        // var ids = this.sels.map(item => item.id).toString();
				console.log(this.sels)
      }
    },
    mounted() {
        // 获取table数据
        this.getTableData()
    }
  }
</script>